<template>
  <section>
  	<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <el-col :span="5">
          <el-input placeholder="请输入课程姓名" v-model="courseName" size="small"></el-input>
        </el-col>
        <div class="firstButton">
          <el-button type="primary" @click="getTableData" size="small">搜索</el-button>
	      </div>
        <div class="secondButton">
          <el-button type="primary" size="small">导出</el-button>
        </div>
	    </div>
    </div>

    <div class="model">
      <img :src="IMGBASE64.QINGJIAFUDAO2X" class="pink">
      <span class="title">课程管理</span>
      <div class="kong"></div>
      <el-table :data="tableData" style="width: 100%" @cell-click="showDetails">
      	<el-table-column prop="id" label="#" align="center"></el-table-column>
      	<el-table-column prop="schoolId" label="课程编号" align="center"></el-table-column>
      	<el-table-column prop="courseName" label="课程名称" align="center"></el-table-column>
      	<el-table-column prop="classTeacher" label="上课老师" align="center"></el-table-column>
      	<el-table-column prop="classAddr" label="上课地点" align="center" :show-overflow-tooltip='true'></el-table-column>
      	<el-table-column prop="rainAddr" label="雨天地点" align="center" :show-overflow-tooltip='true'></el-table-column>
      	<el-table-column prop="teachingObject" label="授课对象" align="center"></el-table-column>
      	<el-table-column prop="watchTeacher" label="巡查人" align="center"></el-table-column>
      	<el-table-column label="操作" align="center" width="150">
      		<template scope="scope">
    					<el-button size="small" @click="delectData(scope)">删除</el-button>
    					<el-button size="small" @click="xiugaishow(scope)">修改</el-button>
    				</template>
      	</el-table-column>
      </el-table>
      <el-pagination
        v-show="paging"
        @current-change="handleCurrentChange"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="total"
        class="pull-right">
      </el-pagination>
    </div>

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="el-icon-close" class="close" @click="upshow()"></el-button>
      <div class="body">
        <el-form label-width="90px">
          <el-col :span="24">
            <el-form-item label="课程名称">
              <span>{{detailsForm.name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课老师">
              <span>{{detailsForm.teacher}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课时间">
              <span>{{detailsForm.time}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上课人数">
              <span>{{detailsForm.num}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课地点">
              <span>{{detailsForm.place}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="雨天地点">
              <span>{{detailsForm.rainPlace}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="授课对象">
              <span>{{detailsForm.object}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="巡查人">
              <span>{{detailsForm.patrolPeople}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="课程详情">
              <span>{{detailsForm.detail}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>

    <div class="details" v-show="isXGDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="el-icon-close" class="close" @click="closexiugai()"></el-button>
      <div class="body">
        <el-form label-width="90px">
          <el-col :span="24">
            <el-form-item label="课程名称">
              <input class="text" type="text" v-model="changeForm.name">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课老师">
              <input class="text" type="text" v-model="changeForm.teacher">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课时间">
                <el-date-picker
                  format="yyyy-MM-dd"
                  ref="date"
                  v-model="changeForm.classDate"
                  type="date"
                  size="small"
                  placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上课人数">
              <input class="text" type="text" v-model="changeForm.num">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上课地点">
              <input class="text" type="text" v-model="changeForm.place">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="雨天地点">
              <input class="text" type="text" v-model="changeForm.rainPlace">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="授课对象">
              <input class="text" type="text" v-model="changeForm.object">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="巡查人">
              <input class="text" type="text" v-model="changeForm.patrolPeople">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="课程详情">
              <input class="text" type="text" v-model="changeForm.detail">
            </el-form-item>
          </el-col>
          <div class="button">
            <button class="btn btn-danger" @click="changeData">保存</button>
          </div>
        </el-form>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="upShow"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      courseName: null,
      total: 0,
      page: 1,
      paging: true,
      tableData: [],
      isDetails: false,
      upShow: false,
      isXGDetails: false,
      detailsForm: {
        name: null,
        teacher: null,
        time: null,
        num: null,
        place: null,
        rainPlace: null,
        object: null,
        patrolPeople: null,
        detail: null
      },
      changeForm: {
        name: null,
        teacher: null,
        teacherId: null,
        num: null,
        place: null,
        rainPlace: null,
        object: null,
        patrolPeople: null,
        patrolId: null,
        detail: null,
        classDate: null,
        courseDesc: null,
        mainImg: null,
        limitNum: null,
        attachs: []
      }
    }
  },
  mounted () {
    this.getTableData()
  },
  methods: {
    handleCurrentChange (val) {
      this.page = val
      this.getTableData()
    },
    getTableData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'interest/course/courseManage/query', {page: (this.page), size: 20, courseName: this.courseName}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.content
          this.total = response.data.data.total
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    delectData (scope) {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'interest/course/courseManage/delete', {id: scope.row.id}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    changeData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'interest/course/courseManage/update', {courseName: this.changeForm.name, classTeacher: this.changeForm.teacher, classTeacherIds: this.changeForm.teacherId, classAddr: this.changeForm.place, classDate: this.changeForm.classDate, rainAddr: this.changeForm.rainPlaces, teachingObject: this.changeForm.object, watchTeacher: this.changeForm.patrolPeople, watchTeacherIds: this.changeForm.patrolId, courseDesc: this.changeForm.courseDesc, mainImg: this.changeForm.mainImg, limitNum: this.changeForm.limitNum, attachs: this.changeForm.attachs}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
          this.isXGDetails = !this.isXGDetails
          this.upShow = !this.upShow
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    upshow () {
      this.isDetails = !this.isDetails
      this.upShow = !this.upShow
    },
    closexiugai () {
      this.isXGDetails = !this.isXGDetails
      this.upShow = !this.upShow
    },
    showDetails (rows, column) {
      if (column.label !== '操作') {
        this.detailsForm.name = rows.courseName
        this.detailsForm.teacher = rows.classTeacher
        this.detailsForm.time = rows.idNo
        this.detailsForm.num = rows.grade
        this.detailsForm.place = rows.classAddr
        this.detailsForm.rainPlace = rows.rainAddr
        this.detailsForm.object = rows.teachingObject
        this.detailsForm.patrolPeople = rows.watchTeacher
        this.detailsForm.detail = rows.homeAddr
        this.isDetails = !this.isDetails
        this.upShow = !this.upShow
      }
    },
    xiugaishow (scope) {
      this.changeForm.name = scope.row.courseName
      this.changeForm.teacher = scope.row.classTeacher
      this.changeForm.teacherId = scope.row.classTeacherIds
      this.changeForm.time = scope.row.time
      this.changeForm.num = scope.row.num
      this.changeForm.place = scope.row.classAddr
      this.changeForm.rainPlace = scope.row.rainAddr
      this.changeForm.object = scope.row.teachingObject
      this.changeForm.patrolPeople = scope.row.watchTeacher
      this.changeForm.patrolId = scope.row.watchTeacherIds
      this.changeForm.detail = scope.row.detail
      this.changeForm.courseDesc = scope.row.courseDesc
      this.changeForm.mainImg = scope.row.mainImg
      this.changeForm.limitNum = scope.row.limitNum
      this.changeForm.classDate = scope.row.classDate
      console.log(this.changeForm)
      this.isXGDetails = !this.isXGDetails
      this.upShow = !this.upShow
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
.firstButton{
  display: inline;
  margin-left: 2%;
}
.secondButton{
  display: inline;
  margin-left: 2%;
}
.text{
  border: 0;
  border-bottom: 1px solid #d7d7d7;
}
.button{
  text-align: center;
}
</style>
